<!--
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2025-03-18 15:33:57
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2025-04-11 20:31:49
 * @FilePath: \BusStopBoard.Webd:\360MoveData\Users\75041\Desktop\uniapp框架\my-project\src\pages\index\text\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="text-wrapper">
        <view :animation="animationData" :style="style"
            :class="[{ roll: isOverflowed }, 'wneben']">{{
                text }}</view>
    </view>
</template>

<script>
export default {
    props: {
        text: {
            type: String,
            default: ''
        },
        start: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isOverflowed: false,
            animationData: {},
            wrapperWidth: 0,
            textWidth: 0,
            ANIMATION_DURATION: 18000, // 主动画时长
            INITIAL_DELAY: 2000,        // 初始延迟
            animation: null,            // 动画实例
        }
    },
    computed: {
        style() {
            if (this.textWidth == 0) {
                return {}
            }
            const params = {
                transform: `translate3d(${this.wrapperWidth}px, 0, 0)`,
                opacity: 1
            }
            return params
        }
    },
    mounted() {
        this.init()
    },
    beforeDestroy() {
        this.clearAnimationTimers()
    },
    methods: {
        // 创建基础动画配置
        createBaseAnimation(options = {}) {
            return uni.createAnimation({
                duration: options.duration ?? this.ANIMATION_DURATION,
                timingFunction: 'linear',
                ...options
            })
        },
        init() {
            setTimeout(() => {
                const query = uni.createSelectorQuery().in(this)
                query.select('.text-wrapper')
                    .boundingClientRect(data => {
                        console.log(data.width, '我才是宽邸呢')
                        this.wrapperWidth = data.width
                    })
                    .select('.wneben')
                    .boundingClientRect(data => {
                        this.textWidth = data.width
                    })
                    .exec(() => {
                    })
            }, 300)
        },
        // 开始动画
        async startAnimation() {

           
            // 清理之前的动画
            this.clearAnimationTimers()

            // 初始化动画实例
            this.animation = this.createBaseAnimation()

      


            // 使用Promise优化异步流程
            await new Promise(resolve => setTimeout(resolve, this.INITIAL_DELAY))

            this.animation
                .translate3d(`${-this.textWidth}px`, 0, 0)
                .step({ duration: this.ANIMATION_DURATION })

               

            this.animationData = this.animation.export()

            console.log(this.animationData,'我进来了呢2')

            // 动画结束后处理
            this.animationTimer = setTimeout(() => {
                this.resetAnimationPosition()
                this.$emit('end')
            }, this.ANIMATION_DURATION)

        },

        // 重置动画位置
        resetAnimationPosition() {
            const resetAnimation = this.createBaseAnimation({ duration: 0 })
            resetAnimation
                .translate3d(`${this.wrapperWidth}px`, 0, 0)
                .step({ duration: 0 })

            this.animationData = resetAnimation.export()
        },
        // 清理定时器
        clearAnimationTimers() {
            if (this.animationTimer) {
                clearTimeout(this.animationTimer)
                this.animationTimer = null
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.text-wrapper {
    overflow: hidden;
    width: 100%;
}

.wneben {
    display: inline-block;
    white-space: nowrap;
    font-size: 28rpx;
    color: red;
    opacity: 0;
}

.roll {
    // animation: scroll 15s linear infinite;
    /* 延长动画时间降低帧率 */
    // transform: translateZ(0);
    // will-change: transform; /* 预声明变更属性 */
    // backface-visibility: hidden;
    // position: absolute; /* 脱离文档流 */
    // white-space: nowrap; /* 防止文字换行重排 */
    // pointer-events: none; /* 禁用点击避免触控冲突 */
    /* 替代 translate3d 的硬件加速方案 */
}
</style>